<template>
  <div>
    <span style="font-weight: 900; font-size: 14px; color:rgb(73, 80, 95)">报告时间：</span>
    <vue-datepicker-local v-model='value[0]' :disabled-date="startTimeOption">
    </vue-datepicker-local>-
    <vue-datepicker-local v-model='value[1]' :disabled-date="endTimeOption">
    </vue-datepicker-local>
    <i @click="closeTime" class="saas-icon-icon-close"></i>
  </div>
</template>
<script>
  import VueDatepickerLocal from 'vue-datepicker-local'
  export default {
    data () {
      return {
        value: ['', '']
      }
    },
    components: { VueDatepickerLocal },
    props: {
      selectTime: Array,
      default: ['', '']
    },
    model: {
      prop: 'selectTime',
      event: 'returnBack'
    },
    watch: {
      value () {
        this.returnBackFn()
      },
      selectTime (newName, oldName) {
        if (newName) {
          this.value = newName
        }
      }
    },
    mounted () {
      console.log(this.selectTime, 'zujianlimiandezhi')
    },
    methods: {
      // 结束日期的判断
      endTimeOption (date) {
        if (this.value[0] !== '') {
          return (date.getTime() < this.value[0].getTime()) || (date.getTime() > Date.now())
        } else {
          return date.getTime() > Date.now()
        }
      },
      // 开始日期的判断
      startTimeOption (date) {
        if (this.value[1] !== '') {
          return (date.getTime() > this.value[1].getTime()) || (date.getTime() > Date.now())
        } else {
          return date.getTime() > Date.now()
        }
      },
      closeTime () {
        this.value = ['', '']
        this.$emit('returnBack', this.value)
      },
      returnBackFn () {
        this.$emit('returnBack', this.value)
      }
    }
  }
</script>
<style scoped>
  .saas-icon-icon-close {
    font-size: 16px;
    position: relative;
    top: 2px;
  }
</style>